<template>
  <div>
    <div
      class="header-inner bg-dark position-fixed"
      :class="{ whiteNav: isActive }"
    >
      <div
        class="row w-100 h-100 d-flex justify-content-md-center justify-content-evenly align-items-center justify-content-lg-evenly"
      >
        <!--   网站图标 -->
        <div class="col-2  col-md-0 col-lg-2  ">
          <div
            class="log navbar-brand fw-bold fs-1  hvr-bounce-in "
            style="color: #fff"
          >
            <slot name="logo">红色小文创</slot>
          </div>
        </div>
        <!-- 导航列表 -->
        <div
          class="col-auto d-md-flex justify-content-center d-md-block d-sm-none d-none"
        >
          <nav class="nav position-relative ">
            <slot name="nav-item"></slot>
          </nav>
        </div>
        <!-- 导航搜索框 -->
        <div class="col-1 offset-1 offset-md-0  ">
          <div class="search text-center">
            <!-- <i
              class="bi bi-search fs-3 hvr-bounce-in"
              style="color: #fff"
              @click="searchShow"
            ></i> -->
          </div>
        </div>
        <!-- 导航菜单按钮 -->
        <!-- <div class="col-2 d-sm-block d-md-none   ">
          <i
            @click="drawerShow"
            class="bi bi-list"
            style="color: #fff; font-size: 2.2em"
          ></i>
        </div> -->
        <!-- 导航btn -->
        <div class="col-2   ">
          <slot name="login"></slot>
        </div>

        <!-- 导航搜索栏 -->
        <!-- <div class="search">
          <el-drawer
            title="搜索栏"
            :visible.sync="searchDrawer"
            :modal="false"
            :direction="directionttb"
          >
            <span>
              <el-input
                placeholder="请输入内容"
                v-model="input"
                clearable
                style="    
                    width: 90%;"
              >
                <template #append>
                  <el-button
                    @click="search"
                    type="primary"
                    icon="el-icon-search"
                    >搜索</el-button
                  >
                </template>
                
              </el-input>
              <div
                v-if="input"
                class="row text-center"
                style="margin-left:45%;"
              >
                还在建设中.......
              </div>
            </span>
          </el-drawer>
        </div> -->

        <!-- 导航侧边栏 -->

        <div class="drawer ">
          <el-drawer
            title="Menu List"
            :visible.sync="drawer"
            :direction="direction"
            :modal="false"
          >
            <span class="nav d-flex  flex-column">
              <slot name="nav-item"></slot>
            </span>
          </el-drawer>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  name: "NavBar",
  // 组件挂载后添加监听事件
  data() {
    return {
      input: "",
      isActive: true,
      isShow: false,
      drawer: false,
      searchDrawer: false,
      direction: "rtl",
      directionttb: "ttb",
    };
  },
  mounted() {
    // window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 我这里监听的是侧边的滚动条
    handleScroll: function() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 200) this.isActive = true;
      else {
        this.isActive = false;
      }
    },
    drawerShow() {
      this.drawer = !this.drawer;
    },
    searchShow() {
      this.searchDrawer = !this.searchDrawer;
    },
    search() {},
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.header-inner {
  width: 100%;
  height: 6.25rem;
  top: 0;
  z-index: 30;
  transition: all 0.5s;
  border-bottom: 1px solid rgb(233, 229, 229);
  .row {
    margin-left: 0;
  }
}
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-left: 0.5em;
  margin-right: 0.5em;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input {
  background: rgb(13, 17, 23);
  color: #f4a460;
}

.whiteNav {
  background: #fff !important;
  height: 110px;
}

.whiteNav .log {
  color: rgb(13, 17, 23) !important;
}
.whiteNav .nav a,
.whiteNav .search i,
.whiteNav .bi-list,
.whiteNav .login {
  color: rgb(13, 17, 23) !important;
}
.whiteNav .login:hover {
  color: #ffff !important;
}
.login {
  color: #fff;
}
.submenu {
  background: #fff;
  transform: rotateX(90deg);
  transform-origin: top;
  top: 73px;
  padding: 0.8rem 1.8rem !important;
}
.submenu li a {
  color: #fff;
  text-decoration: none;
  text-align: center;
}

@media (max-width: 768px) {
  .fs-1 {
    font-size: 1.375rem !important;
  }
}
</style>
